<script setup>
import VueMarkdownEditor from '@kangc/v-md-editor'
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn'
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import Prism from 'prismjs'
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import Request from '@/api/axios'
VueMarkdownEditor.use(vuepressTheme, { Prism })
VueMarkdownEditor.use(createKatexPlugin())
VueMarkdownEditor.use(createMermaidPlugin())

const emit = defineEmits({})
const change = (markdownContent, htmlContent) => {
    emit('update:modelValue', markdownContent)
    emit('htmlContent', htmlContent)
}
const handleUploadImage = async (event, insertImage, files) => {
    const formData = new FormData()
    formData.append('file', files[0])
    formData.append('type', 'image')
    Request.post({
        url: '/upload/markdown-image',
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
        .then((res) => {
            const url = res.info
            insertImage({
                url: url,
                desc: '博客图片',
                width: 'auto',
                height: 'auto'
            })
        })
        .catch((err) => {
            console.log(err)
        })
}
</script>

<template>
    <!-- :disabled-menus="[]"把禁用的title放在此数组中
         :include-level="[1,2,3,4,5,6]" 点击目录导航的层级
      -->
    <VueMarkdownEditor
        :disabled-menus="[]"
        :include-level="[1, 2, 3, 4, 5, 6]"
        @upload-image="handleUploadImage"
        @change="change"
    ></VueMarkdownEditor>
</template>

<style></style>
